<template>
  <div class="m-products-list">
    <dl>
      <dd v-for="(item, index) in nav"
          @click="toSort(item.name)"
          :key="index"
          :class='[item.name, item.active ? "s-nav-active" : "", item.active == 1 && item.bool === 1 ? "top" : "",  item.active == 1 && item.bool === 2 ? "bottom" : ""]'>{{item.txt}}</dd>
    </dl>
    <ul>
      <item
        v-for="(item,idx) in temp"
        :key="idx"
        :meta="item"/>
    </ul>
  </div>
</template>
 
<script lang='ts'>
// 排序 + 列表
import { Component, Vue, Prop } from "vue-property-decorator";
import item from './product.vue'
@Component({
  components: {
    item
  }
})
export default class extends Vue {
  nav: any[] = [
    {
      name: "s-default",
      txt: "智能排序",
      active: true
    },
    {
      name: "s-price",
      txt: "价格排序",
      active: false,
      // 1 -> top 2->bottom
      bool: 1,
    },
    {
      name: "s-visit",
      txt: "人气最高",
      active: false
    },
    {
      name: "s-comment",
      txt: "评价最高",
      active: false
    }
  ]
  @Prop({
    type: Array,
    default() {
      return []
    }
  })
  list: any[]

  name: string = 's-default'
  temp: any[] = []
  mounted() {
    this.temp = this.list.slice()
  }
  toSort(name) {
    if(name === this.name && name != 's-price') return false
    switch(name) {
      case 's-default':
        this.temp = this.list.slice()
        break
      case 's-price':
        let bool = true
        if(this.name = 's-price') {
          bool = this.nav[1].bool === 1 ? true : false 
          this.nav[1].bool = bool ? 2 : 1
        }
        this.temp.sort((a,b) => {
          return bool ? a.price - b.price : b.price - a.price
        })
        break
      case 's-visit':
        this.temp.sort((a,b) => {
          return b.comment - a.comment 
        })
        break
      case 's-comment':
        this.temp.sort((a,b) => {
          return b.rate - a.rate 
        })
        break
    }
    this.nav.forEach((item) => {
      item.active = false
      if(item.name === name) item.active = true
    })
    this.name = name
  }
}
</script>